<template>
  <div class="form-slot">
    <van-form @submit="onSubmit">
      <div class="form-container">
        <slot/>
      </div>
      <div class="button-container fix-padding-safe" v-if="!hideButton">
        <van-button
					v-if="showCancel"
					round
					block
					:type="cancelType"
					@click="onCancel"
        >
          {{ cancelText }}
        </van-button>
        <van-button
					v-if="showConfirm"
					round
					block
					type="primary"
					:disabled="disabled"
					native-type="submit"
        >
          {{ confirmText }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps({
  hideButton: {
    type: Boolean,
    default: false
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
	cancelType: {
		type: String,
		default: 'default'
	},
	showCancel: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: '保存'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
})
const emit = defineEmits([
  'onCancel',
  'onSubmit'
])

const onCancel = () => {
  emit('onCancel')
}

const onSubmit = () => {
  emit('onSubmit')

}
</script>

<style scoped lang="less">
.form-slot {
  height: 100%;

  .van-form {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .form-container {
    flex: 1;
    overflow: scroll;
    padding-bottom: 24px;
  }

  .button-container {
    position: relative;
    height: 128px;
    display: flex;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px;
    background: #fff;
    box-shadow: 0 -4px 24px 0 rgba(0, 0, 0, .12);

    .van-button {
      &:nth-of-type(2) {
        margin-left: 34px;
      }
    }
  }
}
</style>
